<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>我的余额</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <style>
          body{
            background-color: #fcfcfc;
            height:100%;
            padding-top:40px;
          }
          .header{
            width: 100%;
            height:40px;
            background-color: #f5f5f5;
          }
          .leftreturn{
            width:25px;
            height:25px;
            margin:7.5px;
            float: left;
          }
          .main{
            width:100%;
            height:100px;
          }
          .money{
            font-size: 40px;
            font-family: songti;
            font-weight: 700;
            width:100%;
            height:auto;
            padding: 0px 20px;
          }
          .yue{
            font-size: 20px;
            font-family: songti;
            width:100%;
            padding:10px;
            height: auto;
            color: #bbb;
          }
          .tab{
            width:100%;
            height:auto;

          }
          .tab li{
            padding:10px 30px;
            border: 1px solid #fff;
            border-radius: 8px;
            background-color: #f5f5f5;
          }
      </style>
  </head>
  <body>
    <div class="header">
      <img src="../../image/leftreturn.png" alt="" class="leftreturn" onclick="returnframe3();">
    </div>
    <div class="main" id="main">
      <script type="text/x-dot-template"id="tmpl">
      <p class="yue">余额</p>
      {{? it[0].balance!=null}}
      <p class="money" id="money">{{=it[0].balance}}</p>
      {{??}}
      <p class="money" id="money">0</p>      
      {{?}}
      </script>
    </div>
    <ul class="tab">
      <li onclick="Win_chongzhi();">充值</li>
      <li onclick="Win_tixian();">提现</li>
    </ul>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/doT.min.js"></script>
  <script type="text/javascript">
        apiready = function(){
          init_eventlistener();
          init_doT();
        }

        function init_eventlistener(){
          api.addEventListener({
              name: 'updatewdye'
          }, function(ret, err){
              if(ret){
                document.getElementById("money").innerHTML=ret.value.balance;
              }else{}
          });

        }

        function init_doT(){
          user = $api.getStorage('user');
          //使用doT模板将用户信息放入html中
          // 编译模板函数
          tmpltxt=doT.template(document.getElementById("tmpl").innerHTML);//生成模板方法
          document.getElementById("main").innerHTML=tmpltxt(user);//数据渲染
        }

        function returnframe3() {
          api.closeWin();

        }

        function Win_chongzhi() {
          api.openWin({
                  name: 'chongzhi',
                  url: './chongzhi.html',
                  opaque: true,
                  vScrollBarEnabled: false
          });
        }

        function Win_tixian(){
          api.openWin({
                  name: 'tixian',
                  url: './tixian.html',
                  opaque: true,
                  vScrollBarEnabled: false
          });
        }
  </script>
  </html>
